<template>
<div>
  <div class="musicIcon" :style="{ animation: play ? 'rotating 1.2s linear infinite' : ''}" @click="playOrClose">
    <audio ref="audio" loop=""  src="http://res1.eqh5.com/7b96cee6d8024f4caf5d9e290bd4a2ee.mp3" autoplay="" preload=""></audio>
    <img src="/static/img/musicIcon.svg"/>
  </div>
  <swiper v-if="!showConfession" :options="swiperOption">
    <swiper-slide>
      <div class="slide-one">
        <div class="title">不一样的</div>
        <div class="num">520</div>
        <div class="icon">X</div>
        <div class="logo">谭木匠</div>
        <div class="loading">loading 90%</div>
      </div>
      <img src="http://img18.3lian.com/d/file/201708/23/68104530b07cdf49c5c6485555170cb5.jpg"/>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-two">
        <div class="title">2018-5-20</div>
        <div class="num">对你来说是什么</div>
        <div class="summary">是大家暗恋表白的大好时机？</div>
        <div class="summary">是情侣互诉爱意的浪漫节日？</div>
        <div class="summary">是家人增进感情的美好时刻？</div>
        <div class="content add-left add-margin">那么对他们来说</div>
        <div class="content add-left">520是什么？</div>
        <div class="loading"><span>点击进入一个不一样的520</span></div>
      </div>
      <img src="https://i03picsos.sogoucdn.com/7c3727cbff9db233"/>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-two">
        <div class="title">2018-5-20</div>
        <div class="num">对你来说是什么</div>
        <div class="summary">是大家暗恋表白的大好时机？</div>
        <div class="summary">是情侣互诉爱意的浪漫节日？</div>
        <div class="summary">是家人增进感情的美好时刻？</div>
        <div class="content add-left add-margin">那么对他们来说</div>
        <div class="content add-left">520是什么？</div>
        <div class="loading"><span>点击进入一个不一样的520</span></div>
      </div>
      <img src="https://i03picsos.sogoucdn.com/7c3727cbff9db233"/>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three">
        <img src="http://old.bz55.com/uploads/allimg/160130/140-160130104F8.jpg"/>
        <div class="content">
          <div class="text">坐在场下</div>
          <div class="text">他们是观众</div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three">
        <img src="http://old.bz55.com/uploads/allimg/160130/140-160130104F8.jpg"/>
        <div class="content">
          <div class="text">站在台边</div>
          <div class="text">他们是看客</div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three">
        <img src="http://old.bz55.com/uploads/allimg/160130/140-160130104F8.jpg"/>
        <div class="content">
          <div class="text">跃于场上</div>
          <div class="text">他们也可以是健将</div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three">
        <img src="http://old.bz55.com/uploads/allimg/160130/140-160130104F8.jpg"/>
        <div class="content">
          <div class="text">走上舞台</div>
          <div class="text">他们也可以是明星</div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three">
        <img src="http://old.bz55.com/uploads/allimg/160130/140-160130104F8.jpg"/>
        <div class="content">
          <div class="text">创造艺术</div>
          <div class="text">他们也可以是大家</div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three">
        <img src="http://img.article.pchome.net/00/55/48/38/pic_lib/wm/pure_beauty_girl2.jpg"/>
        <div class="content">
          <div class="text">面对艺术</div>
          <div class="text">他们是路人</div>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-fore">
        <div class="text">他们是我们的残疾人士同胞</div>
        <div class="text">今年的520也恰好是</div>
        <div class="text add-margin-bottom">《全国助残日》</div>
        <div class="text">我们看着他们的故事</div>
        <div class="text">在他们的故事里也看到我们</div>
      <div class="confession" @click="onConfession">去表白</div>
      </div>
      <img src="http://img18.3lian.com/d/file/201707/05/f7cf48d3498d5657138eb095bb30685b.jpg"/>
    </swiper-slide>
    <!-- <swiper-slide >
      <div class="slide-five">
        <div class="title">为爱表白</div>
        <div class="text">在下方区域内手写出</div>
        <div class="text">属于你最特别的"520"</div>
        <div class="text add-margin-bottom">在特别的日子里对他们表白</div>
        <div class="textarea">
          <div class="btns">
          </div>
          <canvas id="canvas" ref="canvas" style="background-color:rgb(255,255,255)">
            <p>该手机不支持书写功能</p>
          </canvas>
        </div>
        <div class="btns">
          <div id="savepic" @click="onBrush"  class="btn">清空</div>
          <div id="savepic"  class="btn">送出你的表白</div>
        </div>
      </div>
      <img src="http://img18.3lian.com/d/file/201704/18/fa48ed4a34f5978cb1860e684a9f2fd0.jpg"/>
    </swiper-slide> -->
    <!-- <swiper-slide >
      <div class="slide-six">
        <div class="box">
          <div class="title">表白成功</div>
          <div class="num">520</div>
          <div class="btns">
            <div class="btns-left">查看你的表白</div>
            <div class="btns-right">分享你的表白</div>
          </div>
          <div class="tip">分享即有机会得到"谭木匠"送出的精美礼品</div>
        </div>
        <div class="text">我们将会把所有收集到的</div>
        <div class="text">520表白制作为爱心墙放置于</div>
        <div class="text">谭木匠工厂中</div>
        <div class="text">同时在谭木匠所有门店荧幕中展示</div>
        <div class="text">每一份心意都会被传递</div>
        <div class="text">每一次表白都会被珍视</div>
      </div>
      <img src="http://img18.3lian.com/d/file/201704/18/fa48ed4a34f5978cb1860e684a9f2fd0.jpg"/>
    </swiper-slide> -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css' // 在全局没引入，这里记得要！
import { swiper, swiperSlide } from 'vue-awesome-swiper'
// import { drawCanvas } from '../lib/cavas.js'

export default {
  components: {
    swiper,
    swiperSlide
  },
  name: 'Carrousel',

  data () {
    return {
      play: true,
      eraserflag: 1,
      brushflag: 0,
      showConfession: false,
      swiperOption: {
        // autoplay: {
        //   stopOnlastSlide: true
        // },
        allowTouchMove: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        direction: 'vertical',
        slidesPerView: 1,
        // spaceBetween: 30,
        mousewheel: true,
        preventClicks: false,
        on: {
          slideChangeTransitionEnd: function (event) {
            console.log('我是event', this.activeIndex)
            // if (this.activeIndex === 9) {
            //   this.allowTouchMove = false
            // }
          }
        }
        // onTouchEnd: function (swiper) {
        //   console.log('我是swiper', swiper)
        // }
      }
      // items: [1, 2, 3, 4],
      // swiperSlides: ['http://img18.3lian.com/d/file/201708/23/68104530b07cdf49c5c6485555170cb5.jpg', 'http://old.bz55.com/uploads/allimg/160415/140-160415101I4.jpg', 'http://old.bz55.com/uploads/allimg/160415/140-160415101Q1.jpg', 'http://old.bz55.com/uploads/allimg/160415/140-160415101J4.jpg']
    }
  },
  // watch: {
  //   state: {
  //     handle: function (val, oldval) {
  //       console.log('我是1212', val, oldval)
  //     }
  //   },
  //   deep: true
  // },
  mounted () {
    // this.init()
    this.$nextTick(function () {
      console.log(23232333)
    })
    // console.log('我是', this.state)
    // document.onreadystatechange = this.completeLoading()
    // let canvas = this.$refs.canvas
    // let context = canvas.getContext('2d')
    // drawCanvas(context, canvas, this.eraserflag, this.brushflag)
    // setInterval(() => {
    //   if (this.swiperSlides.length < 4) {
    //     this.swiperSlides.push(this.swiperSlides.length + 1)
    //   }
    // }, 3000)
  },
  // beforeCreate(){
  //   this.init()
  // },
  methods: {
    init () {
      if (document.readyState === 'complete') {
        this.state = 100
        console.log('我是100', this.state)
      }
    },
    completeLoading () {
      console.log('document.readyState == "complete"', document.readyState)
    },
    playOrClose () {
      let audio = this.$refs.audio
      this.play = !this.play
      if (this.play) {
        // audio.play()
        audio.pause()
      } else {
        audio.pause()
      }
    },
    onConfession () {
      this.$router.push({ path: 'send' })
    }
    // onBrush () {
    //   let canvas = this.$refs.canvas
    //   let context = canvas.getContext('2d')
    //   this.eraserflag = 1
    //   this.brushflag = 0
    //   drawCanvas(context, canvas, this.eraserflag, this.brushflag)
    // },
    // onEraser () {
    //   this.eraserflag = 0
    //   this.brushflag = 1
    //   let canvas = this.$refs.canvas
    //   let context = canvas.getContext('2d')
    //   drawCanvas(context, canvas, this.eraserflag, this.brushflag)
    // }
  }
}
</script>
<style  @scoped lang="less">
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
      .musicIcon{
        position: absolute;
        right: .2rem;
        top: .2rem;
        width: .7rem;
        height: .7rem;
        z-index: 9;
        // animation:rotating 1.2s linear infinite;
      }
      @keyframes rotating
        {
        from {transform:rotate(0)}
        to {transform:rotate(360deg)}
        }

        @-webkit-keyframes rotating /*Safari and Chrome*/
        {
        from {transform:rotate(0)}
        to {transform:rotate(360deg)}
        }
    }
    .swiper-container {
        width: 100%;
        max-height: 100vh;
    }
    .swiper-slide {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide img{
        width: 100%;
    }
    .swiper-pagination-bullet-active{
      background:#FF4866!important;
    }
    .slide-one{
      position: absolute;
      text-align: center;
      top: 0;
      bottom: 0;
      width: 100%;
      .box{
        position: absolute;
        left: 0;
        top: 0;
        width: 1rem;
        height: 1rem;
        background: red;
      }
      .title{
        font-size: .7rem;
        font-weight: bold;
        margin-bottom: 1.7rem;
        margin-top: 2rem;
      }
      .num{
        font-size: 2rem;
        color: #ff0000c7;
        font-weight: bold;
        margin-bottom: 1.3rem;
        font-family: fantasy;
      }
      .icon{
        font-size: .6rem;
        color: #999;
      }
      .logo{
        margin-top: .6rem;
        font-size: .6rem;
      }
      .loading{
        position: absolute;
        bottom: 1.5rem;
        font-size: .3rem;
        color: #666;
        width: 2rem;
        left: 50%;
        margin-left: -1rem;
      }
    }
    .slide-two{
      position: absolute;
      text-align: center;
      top: 0;
      bottom: 0;
      font-family: fantasy;
      .title{
        font-size: .8rem;
        font-weight: bold;
        margin-bottom: .4rem;
        margin-top: 2rem;
      }
      .num{
        font-size: .57rem;
        font-weight: bold;
        margin-bottom: 1rem;
        font-family: serif;
      }
      .summary{
        font-size: .3rem;
        color: #333;
        margin-bottom: .3rem;
      }
      .content{
        font-size: .47rem;
        font-weight: bold;
        margin-bottom: .4rem;

      }
      .add-margin{
        margin-top: 1rem;
      }
      .add-left{
        text-align: left;
      }
      .loading{
        position: absolute;
        bottom: 1.5rem;
        font-size: .3rem;
        color: #666;
        left: 50%;
        margin-left: -2.1rem;
        border: .01rem solid #666;
        border-radius: .07rem;
        text-align: center;
        padding: .2rem .2rem;
        width: 4rem;
      }
    }
    .slide-three-bg{
      background: #FFF;
      height: 100%;
      width: 100%;
    }
    .slide-three{
      position: absolute;
      text-align: center;
      top: 0;
      bottom: 0;
      font-family: fantasy;
      img{
        height: 70vh;
      }
      .text{
        font-weight: bold;
        margin-bottom: .3rem;
        font-size: .5rem;
        color: #000;
      }
      .content{
        width: 100%;
        height: 30vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: #FFF;
      }
    }
    .slide-fore{
      position: absolute;
      text-align: center;
      top: 0;
      bottom: 0;
      font-family: fantasy;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .confession{
        position: absolute;
        bottom: 1.5rem;
        font-size: .3rem;
        color: #666;
        left: 50%;
        margin-left: -2.1rem;
        border: .01rem solid #666;
        border-radius: .07rem;
        text-align: center;
        padding: .2rem .2rem;
        width: 4rem;
      }
      .text{
        font-size: .5rem;
        font-weight: bold;
        margin-bottom: .5rem;
        font-family: serif;
      }
      .add-margin-bottom{
        margin-bottom: 2rem;
      }
    }
    // .slide-five{
    //   position: absolute;
    //   text-align: center;
    //   top: 0;
    //   bottom: 0;
    //   font-family: fantasy;
    //   height: 100vh;
    //   width: 7.5rem;
    //   overflow: hidden;
    //   position: fixed;
    //   background: yellowgreen;
    //   top:0;
    //   .title{
    //     font-size: 1rem;
    //     margin-top: 1.5rem;
    //     margin-bottom: .7rem;
    //     color: #000;
    //     font-weight: bold;
    //   }
    //   .text{
    //     font-size: .3rem;
    //     font-weight: bold;
    //     margin-bottom: .1rem;
    //     font-family: serif;
    //   }
    //   .textarea{
    //     width: 7.5rem;
    //     height: 5rem;
    //     margin-top: .5rem;
    //   }
    //   .btns{
    //     display: flex;
    //     // position: absolute;
    //     // bottom: 1rem;
    //     font-size: .3rem;
    //     color: #666;
    //     // left: .3rem;
    //   }
    //   .btn{
    //     border: .01rem solid #666;
    //     border-radius: .07rem;
    //     text-align: center;
    //     padding: .2rem .2rem;
    //     width: 2.9rem;
    //     margin-right: .3rem;
    //   }
    // }
    .slide-six{
      position: absolute;
      text-align: center;
      top: 0;
      bottom: 0;
      font-family: fantasy;
      .box{
        width: 6rem;
        height: 5rem;
        border: .01rem solid #999;
        margin-bottom: 2rem;
        margin-top: 1.5rem;
        .title{
          margin-top: 1rem;
          font-size: .6rem;
          font-weight: bold;
          margin-bottom: .5rem;
        }
        .num{
          font-size: .8rem;
          font-weight: bold;
          color: #ff0000c2;
          margin-bottom: .8rem;
        }
        .btns{
          display: flex;
          margin-bottom: .5rem;
          align-items: center;
          justify-content: center;
          font-size: .24rem;
          font-weight: bold;
          .btns-left{
            width: 2.5rem;
            height: .5rem;
            border: .01rem solid #666;
            line-height: .6rem;
            margin-right: .5rem;
          }
          .btns-right{
            width: 2.5rem;
            height: .5rem;
            border: .01rem solid #666;
            line-height: .6rem;
          }
        }
        .tip{
          font-size: .2rem;
          text-align: right;
          margin-right: .2rem;
          color: #584848;
        }
      }
      .text{
        margin-bottom: .2rem;
      }
    }

    </style>
